{extend name="base2" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/reset.css">
<link rel="stylesheet" href="__CSS__/base.css">
<style>
    #masonry{
        margin: auto;
    }
</style>
{/block}

{block name="body"}
<div style="margin-top:5px;">
    <img src="/static/images/banner.jpg" alt="">
</div>

    <div id="masonry" class="container-fluid masonry">
        {foreach name="tiao_list" item="vw"}
        <div class="box">
            <a href="{:url('jump_img/img_detail',['id'=>$vw['id']])}">
                <img src="{$vw.thumb ? $vw.thumb : '/static/images/default.png'}" alt="">
                <h2 class="on">{$vw.name}</h2>
            </a>
        </div>
        {/foreach}
    </div>

</div><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261688529'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1261688529' type='text/javascript'%3E%3C/script%3E"));</script>
{/block}

{block name="script"}
<script>
    $(function() {
        var $container = $('.masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: '.box',
                gutter: 34,
                isAnimated: true,
                isFitWidth: true,
            });
        });
    });
</script>
{/block}